<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <!--
    文档地址：
    https://cn.vuejs.org/v2/guide/components-custom-events.html
    https://www.runoob.com/vue2/vue-loop.html
    https://v4.bootcss.com/docs/components/input-group/

    -->
    <meta charset="utf-8">
    <title>material science</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav id="app" class="container-fluid">

    <!--搜索区域-->
    <div class="input-group flex-nowrap input-group-lg">
        <div class="input-group-prepend">
            <span class="input-group-text" id="addon-wrapping" v-on:click="search(page)" @keyup.alt.49="search(page)" style="cursor:pointer">F5</span>
        </div>
        <input type="text" class="form-control" placeholder="请搜索" aria-describedby="addon-wrapping" v-model="content"
               v-on:keyup.enter="search({page})">
    </div>


    <div class="container">
        <nav class="row">
            <div class="col-md-9">
                <div class="list-group">
                    <div v-for="e in data">
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <h5 class="mb-1"><a v-on:click="goTo(e)" href="#">{{e.tag}}</a></h5>
                                <small x="e.type">
                                    <button type="button" v-on:click="del(e)" class="btn btn-outline-danger btn-sm">
                                        Del
                                    </button>
                                </small>
                            </div>
                            <p class="mb-1"  v-on:click="info(e)" style="cursor:pointer">{{e.content}}</p>
                        </div>
                    </div>
                </div>
                <ul class="pagination pagination-ms">
                    <li class="page-item" v-for="n in totalPages" v-on:click="search(n - 1)">
                        <a v-if="n==page+1" class="page-link" style="background-color: cornflowerblue;color: aliceblue"
                           href="#">
                            {{n}}
                        </a>
                        <a v-else class="page-link" href="#">{{n}}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-3">

                <div>
                    <form>
                        <div class="form-group">
                            <label for="m-tag">标题</label>
                            <input type="text" class="form-control" v-model="material.tag" id="m-tag">
                        </div>
                        <div class="form-group">
                            <label for="m-address">内容地址</label>
                            <input type="text" class="form-control" v-model="material.address" id="m-address">
                        </div>
                        <div class="form-group">
                            <label for="m-content">内容</label>
                            <textarea class="form-control" id="m-content" v-model="material.content"
                                      rows="3"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="m-type">资源类型</label>
                            <select class="form-control" id="m-type" v-model="material.type">
                                <option value="1">网址</option>
                                <option value="2">本地磁盘</option>
                                <option value="3">其他</option>
                            </select>
                        </div>
                        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                            <div class="btn-group mr-2" role="group" aria-label="First group">
                                <button type="button" v-on:click="saveOrUpdate()" class="btn btn-success">添加及更新</button>

                            </div>
                            <div class="btn-group mr-2" role="group" aria-label="Second group">
                                <button type="button" v-on:click="init()" class="btn btn-secondary">重置</button>
                            </div>
                            <div class="btn-group" role="group" aria-label="Third group">
                                <button type="button" v-on:click="del()" class="btn btn-danger">删除</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </nav>
    </div>

</nav>

<script>
    new Vue({
        el: '#app',
        data: {
            content: '',
            page: 0,
            size: 10,
            data: [],        //  元数据
            totalPages: 0,   //  总页数
            totalElements: 0,     //  总数据
            material: {     //  新增更新对象
                id: null,
                content: null,
                address: null,
                tag: null,
                type: 1
            }
        },
        mounted: function () {
            this.search(this.page)
        },
        methods: {
            search: function (page) {
                this.$http.get('/es/material/search', {
                    params: {
                        content: this.content,
                        page: page,
                        size: this.size
                    }
                }).then(function (res) {
                    this.data = res.data.content;
                    this.totalPages = res.data.totalPages;
                    this.totalElements = res.data.totalElements;
                    this.page = res.data.pageable.pageNumber;
                }, function () {
                });
            },
            del: function (e) {
                if(e == null){
                    this.$http.delete('/es/material/delete/' + this.material.id).then(function (res) {
                        this.search(this.page)
                    })
                }else {
                    this.$http.delete('/es/material/delete/' + e.id).then(function (res) {
                        this.search(this.page)
                    })
                }

            },
            info: function (e) {
                this.$http.get('/es/material/findById/' + e.id).then(function (res) {
                    this.material.id = res.data.id;
                    this.material.address = res.data.address;
                    this.material.content = res.data.content;
                    this.material.tag = res.data.tag;
                    this.material.type = res.data.type;
                }, function () {
                });
            },
            goTo: function (e) {
                if(e.type === 1){
                    window.open(e.address,'_blank');
                }else if(e.type==2){
                    window.location.href=e.address;
                }
            },
            saveOrUpdate: function () {
                this.$http.put('/es/material/addOrUpdateBatch', [this.material]).then(function (res) {
                    this.search(this.page)
                }, function () {
                })
            },
            init: function () {
                this.material.id=null;
                this.material.content=null;
                this.material.address=null;
                this.material.tag=null;
                this.material.type=1;
            }
        }
    })
</script>
</body>
</html>